
import {Row,Col} from "antd"
import "./index.less"
import * as echarts from "echarts";   // 引入 echarts 
import {useEffect,useState} from "react"
import { ajax } from '@/services';

export default function UserFenxi(){
  const [list,setList] = useState<Array<any>>([])
  useEffect(()=>{
    initChartOne()
    getUserListAction({})
  },[])

  const getUserListAction = async (options:any)=>{
    let res = await ajax.getuserlist(options);
    const {code,result} = res;
    if(code==200){
      setList(result)
      initChartTwo(result)
    }
  }
  function initChartTwo(result){
    var myChart = echarts.init(document.getElementById('charttwo'));
    var data1 = result.filter(item=>item.role==1).length;
    var data2 = result.filter(item=>item.role==2).length;
    var data3 = result.filter(item=>item.role==3).length;

    var option = {
      title: {
        text: '千锋武汉人员分析',
        subtext: '学员-班主任-讲师(比例)',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '人数占比',
          type: 'pie',
          radius: '50%',
          data: [
            { value: data1, name: '学员' },
            { value: data2, name: '班主任' },
            { value: data3, name: '讲师' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChart.setOption(option);
  }

  
  function initChartOne(){
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('chartone'));
       // 指定图表的配置项和数据
       var option = {
         title: {
           text: 'WH2107 学员迟到次数分析'
         },
         tooltip: {},
         legend: {
           data: ['次数']
         },
         xAxis: {
           data: ['拉拉', '大左', '老王', '老余', '大雷', '丽丽']
         },
         yAxis: {},
         series: [
           {
             name: '次数',
             type: 'bar',
             data: [5, 20, 36, 10, 10, 20]
           }
         ]
       };
 
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
  }
  return (
    <div>
      <h2>用户数据分析</h2>
      <Row style={{margin:"10px 0 0 0"}}>
          <Col  span={11}>
            {/* 准备一个容器来呈现数据表格  */}
              <div className="chartbox" id="chartone"></div>
          </Col>
          <Col  offset={1} span={11}>
            <div className="chartbox" id="charttwo"></div>
          </Col>
      </Row>
    </div>
  )
}